<template>
  <div>
    <!-- 顶部 -->
    <Top></Top>
    <!-- 分类导航 -->
    <TopType></TopType>
    <!-- 轮播图推广 -->
    <BannerRotation></BannerRotation>
    <!-- 正在直播 -->
    <LiveList class="child"></LiveList>
    <!-- 动画 -->
    <DougaList class="child"></DougaList>
    <!-- 番剧 -->
    <AnimeList class="child"></AnimeList>
    <!-- 国创 -->
    <GuoChuangList class="child"></GuoChuangList>
    <!-- 漫画 -->
    <CartoonList class="child"></CartoonList>
    <!-- 音乐 -->
    <MusicList class="child"></MusicList>
    <!-- 舞蹈 -->
    <DanceList class="child"></DanceList>
    <!-- 游戏 -->
    <GameList class="child"></GameList>
    <!-- 知识 -->
    <KnowledgeList class="child"></KnowledgeList>
    <!-- 课堂 -->
    <ClassroomList class="child"></ClassroomList>
    <!-- 数码 -->
    <DigitalList class="child"></DigitalList>
    <!-- 生活 -->
    <LifeList class="child"></LifeList>
    <!-- 鬼畜 -->
    <GuichuList class="child"></GuichuList>
    <!-- 时尚 -->
    <FashionList class="child"></FashionList>
    <!-- 资讯 -->
    <RealtimeinfoList class="child"></RealtimeinfoList>
    <!-- 娱乐 -->
    <EntertainmentList class="child"></EntertainmentList>
    <!-- 专栏 -->
    <SpecialColumnList class="child"></SpecialColumnList>
    <!-- 电影 -->
    <MovieList class="child"></MovieList>
    <!-- 电视剧 -->
    <TVList class="child"></TVList>
    <!-- 影视 -->
    <CinephileList class="child"></CinephileList>
    <!-- 纪录片 -->
    <RecordList class="child"></RecordList>
    <!-- 特别推荐 -->
    <RecommendList></RecommendList>
    <!-- 右侧导航 -->
    <RightNav class="rightNav"></RightNav>
    <!-- 页面底部 -->
    <Footer></Footer>


  </div>
</template>

<script>
  import Top from '../../components/Home/Top.vue'
  import TopType from '../../components/Home/TopType.vue'
  import BannerRotation from '../../components/Home/BannerRotation.vue'
  import LiveList from '../../components/Home/LiveList.vue'
  import DougaList from '../../components/Home/DougaList.vue'
  import AnimeList from '../../components/Home/AnimeList.vue'
  import GuoChuangList from '../../components/Home/GuoChuangList.vue'
  import CartoonList from '../../components/Home/CartoonList.vue'
  import MusicList from '../../components/Home/MusicList.vue'
  import DanceList from '../../components/Home/DanceList.vue'
  import GameList from '../../components/Home/GameList.vue'
  import KnowledgeList from '../../components/Home/KnowledgeList.vue'
  import ClassroomList from '../../components/Home/ClassroomList.vue'
  import DigitalList from '../../components/Home/DigitalList.vue'
  import LifeList from '../../components/Home/LifeList.vue'
  import GuichuList from '../../components/Home/GuichuList.vue'
  import FashionList from '../../components/Home/FashionList.vue'
  import RealtimeinfoList from '../../components/Home/RealtimeinfoList.vue'
  import EntertainmentList from '../../components/Home/EntertainmentList.vue'
  import SpecialColumnList from '../../components/Home/SpecialColumnList.vue'
  import MovieList from '../../components/Home/MovieList.vue'
  import TVList from '../../components/Home/TVList.vue'
  import CinephileList from '../../components/Home/CinephileList.vue'
  import RecordList from '../../components/Home/RecordList.vue'
  import RecommendList from '../../components/Home/RecommendList.vue'
  import RightNav from '../../components/Home/RightNav.vue'
  // import Footer from '../../components/public/Footer.vue'
  export default {
    name: 'Home',
    components: {
      Top,
      TopType,
      BannerRotation,
      LiveList,
      DougaList,
      AnimeList,
      GuoChuangList,
      CartoonList,
      MusicList,
      DanceList,
      GameList,
      KnowledgeList,
      ClassroomList,
      DigitalList,
      LifeList,
      GuichuList,
      FashionList,
      RealtimeinfoList,
      EntertainmentList,
      SpecialColumnList,
      MovieList,
      TVList,
      CinephileList,
      RecordList,
      RecommendList,
      RightNav,
    },
    data() {
      return {
        index:0
      }
    },
    methods:{
      handleScroll(){
        for(let i=0; i<jquery('.child').length; i++){
          if(jquery('.child').eq(i).offset().top <= (document.documentElement.scrollTop+400)){
            this.index = i
            jquery('.rightNav').find('.tab-item').eq(this.index).addClass("tabitemActive").siblings().removeClass("tabitemActive");
          }else if(jquery('.child').eq(0).offset().top>(document.documentElement.scrollTop+400)){
            jquery('.rightNav').find('.tab-item').removeClass('tabitemActive')
          }
        }
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);//添加滚轮滚动事件
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);   // 离开页面清除（移除）滚轮滚动事件
    }
  }
</script>

<style scoped>
  .tabitemActive{
    background-color: #00a1d6;
    color:#fff;
  }
</style>
